<template>
  <div class="goods">
    <h3>{{ pname }}</h3>
    <p>{{ info }}</p>
    <p>商品价格:{{ price }}</p>
    <!-- 因为涉及单项数据流 -->
    <!-- Vue中的数据，要遵循单项数据流原则：
        1. 父组件传递给子组件的数据，父组件如果修改了数据，则会自动更新到子组件
        2. 父组件传递给子组件的数据，在子组件中不能修改。 -->


        <!-- 语法: -->
    <!-- @click= "$emit('事件名','传递的数据')" -->
    <!-- 下面这个1的意思就是 砍价砍1元  -->
    <button @click="$emit('kanyidao', 1, id)">砍一刀</button>
  </div>
</template>

<script>
export default {
  // props: ["id", "price", "info", "pname"],
  props:{
    id:{
      //要求id必填  要求父组件必须传递id
      require:true,
      type:Number,//要求传递过来的id必须是数字类型

    },
    pname:{
      // default:() => {},
      default:'方便面',//默认值的意思,如果默认值是数组或对象,要求写成函数  函数中返回数组
      type:String,//要求传过来的pname必须是字符串类型
    },
    price:Number,//只要求单项时  可以这样写
    info:{
      require:true,
      type:[Number,String]//要求类型是数字或者字符串
    },


  }
};
</script>

<style >
.goods {
  padding: 5px;
  margin: 8px;
  border: solid 2px hotpink;
}
</style>